<template>
	<div class="editor-container">
		<div class="layout content-layout">
			<div v-if="terminalContent.viewed">
				<div class="drag-area list-group h100" :style="{
						'backgroundColor': terminalContent.bgColor, 
						'backgroundImage': `url('${terminalContent.imageUrl}')`, 
						'backgroundRepeat': 'no-repeat'}">
					<div v-for="(element,index) in componentsData" :key="index">
						<component :is="element.type"  :terminal="terminal" :model="element"></component>
					</div>
				</div>
			</div>
			<div v-else>
				<draggable class="drag-area list-group h100" :style="{
						'backgroundColor': terminalContent.bgColor, 
						'backgroundImage': `url('${terminalContent.imageUrl}')`, 
						'backgroundRepeat': 'no-repeat'}" 
					:list="componentsData" item-key="id" group="page-edit" @change="onPageChange">
					<template #item="{ element,index }" :key="index">
						<div class="list-group-item" @click="selectComponent(element)" :class="[{'on': activeComponent.id == element.id}, `item-${element.type}`]" >
							<component :is="element.type" :terminal="terminal" :model="element"></component>
							<div class="del-btn">
								<span @click.stop.prevent="delComponent(element.id)"><i class="iconfont icon-shanchu"></i></span>
							</div>
						</div>
					</template>
				</draggable>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, onMounted, computed } from 'vue';
	import draggable from 'vuedraggable';
	import { useStore } from '/@/store/index';
	import { ElMessageBox } from 'element-plus';
	import { nanoid } from 'nanoid';
	
	//组件
	import Custom from '/@/views/decorator/components/leftBar/basics/custom.vue';
	
	import Banner from '/@/views/decorator/components/leftBar/basics/banner.vue';
	import Text from '/@/views/decorator/components/leftBar/basics/text.vue';
	import Image from '/@/views/decorator/components/leftBar/basics/image.vue';
	import ImageText from '/@/views/decorator/components/leftBar/basics/imageText.vue';
	import ImageTextList from '/@/views/decorator/components/leftBar/basics/imageTextList.vue';
	import Division from '/@/views/decorator/components/leftBar/basics/division.vue';
	import Video from '/@/views/decorator/components/leftBar/basics/video.vue';
	
	import Pencil from '/@/views/decorator/components/leftBar/basics/pencil.vue';
	import Counter from '/@/views/decorator/components/leftBar/basics/counter.vue';
	import Checkbox from '/@/views/decorator/components/leftBar/basics/checkbox.vue';
	import Radiobox from '/@/views/decorator/components/leftBar/basics/radiobox.vue';
	import Selectbox from '/@/views/decorator/components/leftBar/basics/selectbox.vue';
	import Button from '/@/views/decorator/components/leftBar/basics/button.vue';
	
	export default {
		name: 'decorator/editor',
		components: {
			draggable,
			Custom,
			Banner,
			Text,
			Image,
			ImageText,
			ImageTextList,
			Division,
			Video,
			Pencil,
			Counter,
			Checkbox,
			Radiobox,
			Selectbox,
			Button,
		},
		setup() {
			const store = useStore();
			const state = reactive({
				
			});
			
			state.terminal = computed(() => store.state.decorator.terminal);
			state.terminalContent = computed(() => store.state.decorator.terminalContent);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			state.componentsData = computed(() => store.state.decorator.componentsData);
			
			const setActiveComponent = (activeComponent) => {
				store.dispatch('decorator/setActiveComponent', activeComponent);
			};

			// 画布添加或者移动了组件
			const onPageChange = (e) => {
				if (e.added) {
					e.added.element.id = nanoid();
					setActiveComponent(e.added.element);
				}
				if (e.moved) {
					setActiveComponent(e.moved.element);
				}
			};

			// 选中组件
			const selectComponent = (item) => {
				setActiveComponent(item);
			}

			// 删除组件
			const delComponent = (id) => {
				if(state.terminalContent.confirm){
					ElMessageBox.confirm('确定删除吗？', '提示', {
						confirmButtonText: '删除',
						cancelButtonText: '取消',
						type: 'warning',
					}).then(() => {
						removeComponent(id);
					}).catch(() => {});
				}else{
					removeComponent(id);
				}
			}
			
			const removeComponent = (id) => {
				const data = state.componentsData.filter(item => item.id == id)[0];
				const index = state.componentsData.indexOf(data);
				if(index > -1){
					state.componentsData.splice(index, 1);
				}
				setActiveComponent({});
			}

			onMounted(() => {

			});
			
			// 阻止部分浏览器默认拖拽行为
			document.body.ondrop = function(event) {
				event.preventDefault();
				event.stopPropagation();
			};

			return {
				onPageChange,
				selectComponent,
				delComponent,
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
	.content-layout {
		:deep .sortable-chosen {
			.content-box {
				display: block;
				width: 100%;
				line-height: 30px;
				font-size: 14px;
				text-align: center;
				background-color: #66b1ff;
				color: #fff;
				i{
					margin-right: 5px;
				}
			}
		}

		.list-group {
			min-height: 100vh;
		}

		.list-group-item {
			position: relative;
			cursor: move;
			
			&.item-assistDiv,
			&.item-notice,
			&.item-text {
				min-height: 0px;
			}

			.del-btn {
				display: none;
			}

			&:hover {
				&:after {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					border: 1px #409EFF dashed;
					z-index: 1;
				}
			}

			&.on {
				&:after {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					border: 1px #409EFF solid;
					z-index: 2;
				}

				.del-btn {
					display: block;
					position: absolute;
					right: -13px;
					top: 50%;
					margin-top: -13px;
					z-index: 3;

					span {
						display: block;
						width: 26px;
						height: 26px;
						line-height: 26px;
						text-align: center;
						color: #666;
						background-color: #fff;
						box-shadow: 0 0 2px rgba(51, 51, 51, 0.2);
						border-radius: 2px;
						cursor: pointer;
					}
				}
			}
		}
	}
	
	.warp {
		padding: 0 10px;
		margin: 0 auto;
		max-width: 100%;
	}
	.flex-box {
		display: flex;
	}
</style>

